<template>
  <div class="videoPopup">
    <div class="close" @click="handleClose()"></div>
    <p class="mainTitle">视频监控</p>
    <div class="videoBox">
      <div id="playWnd" class="playWnd"></div>
    </div>
  </div>
</template>
<script>
//声明公用变量
var oWebControl = null

export default {
  data() {
    return {}
  },
  props: {
    cameraIndexCode: {
      type: String,
      default: '',
    },
    playWndWidth: {
      type: Number,
      default: 650,
    },
    playWndHeight: {
      type: Number,
      default: 440,
    },
  },
  mounted() {
    this.initPlugin()
  },
  beforeDestroy() {
    if (oWebControl != null) {
      oWebControl.JS_HideWnd() // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
      oWebControl.JS_Disconnect().then(
        function () {
          // 断开与插件服务连接成功
        },
        function () {
          // 断开与插件服务连接失败
        }
      )
    }
  },
  methods: {
    // 创建播放实例
    initPlugin() {
      let that = this
      oWebControl = new WebControl({
        szPluginContainer: 'playWnd', // 指定容器id
        iServicePortStart: 15900, // 指定起止端口号，建议使用该值
        iServicePortEnd: 15909,
        szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
        cbConnectSuccess: function () {
          // 创建WebControl实例成功
          console.log('创建WebControl实例成功success')
          // 启动插件服务接口
          oWebControl
            .JS_StartService('window', {
              // WebControl实例创建成功后需要启动服务
              dllPath: './VideoPluginConnect.dll', // 值"./VideoPluginConnect.dll"写死
            })
            .then(
              function () {
                // 启动插件服务成功
                //步骤三代码
                // oWebControl.JS_SetWindowControlCallback({
                //   // 设置消息回调
                //   cbIntegrationCallBack: this.cbIntegrationCallBack,
                // })
                // 启用视频播放 创建视频播放窗口，宽高可设定
                oWebControl.JS_CreateWnd('playWnd', that.playWndWidth, that.playWndHeight).then(function () {
                  that.init() // 创建播放实例成功后初始化
                })
                //
              },
              function () {
                // 启动插件服务失败
              }
            )
        },
        cbConnectError: function () {
          // 创建WebControl实例失败
          console.log('error')
          // that.playText = '插件启动失败，请检查插件是否安装！'
        },
        cbConnectClose: function (bNormalClose) {
          // 异常断开：bNormalClose = false
          oWebControl = null
          // console.log('cbConnectClose')
        },
      })
    },
    //消息回调监听
    cbIntegrationCallBack(oData) {
      let { responseMsg: type, responseMsg: msg } = oData
      console.log('哈哈哈', oData)
      if (type === 'error') {
        console.log(type, msg, this.dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'))
      } else {
        console.log(type, msg, this.dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'))
      }
    },
    // 初始化
    init() {
      let that = this
      // this.getPubKey(() => {
      var appkey = '21466347' //综合安防管理平台提供的appkey，必填
      var secret = 'RdanrzMYCuRVu7QJt9HW' //综合安防管理平台提供的secret，必填
      var ip = '10.134.63.2' //综合安防管理平台IP地址，必填 10.134.63.2, 192.168.151.11, 10.7.79.14, 35.1.64.205
      var playMode = 0 //初始播放模式：0-预览，1-回放
      var port = 443 //综合安防管理平台端口，若启用HTTPS协议，默认443
      var snapDir = 'D:\\SnapDir' //抓图存储路径
      var videoDir = 'D:\\VideoDir' //紧急录像或录像剪辑存储路径
      var layout = '1x1' //playMode指定模式的布局
      var enableHTTPS = 1 //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
      // var encryptedFields = 'secret' //加密字段，默认加密领域为secret
      var showToolbar = 1 //是否显示工具栏，0-不显示，非0-显示
      var showSmart = 1 //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
      var buttonIDs = '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769' //自定义工具条按钮
      // var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮
      oWebControl
        .JS_RequestInterface({
          funcName: 'init',
          argument: JSON.stringify({
            appkey: appkey, //API网关提供的appkey
            secret: secret, //API网关提供的secret
            ip: ip, //API网关IP地址
            playMode: playMode, //播放模式（决定显示预览还是回放界面）
            port: port, //端口
            snapDir: snapDir, //抓图存储路径
            videoDir: videoDir, //紧急录像或录像剪辑存储路径
            layout: layout, //布局
            enableHTTPS: enableHTTPS, //是否启用HTTPS协议
            // encryptedFields: encryptedFields, //加密字段
            showToolbar: showToolbar, //是否显示工具栏
            showSmart: showSmart, //是否显示智能信息
            buttonIDs, //自定义工具条按钮
          }),
        })
        .then(function (oData) {
          // console.log('oData', oData)
          // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
          oWebControl.JS_Resize(that.playWndWidth, that.playWndHeight)
          console.log('playWndWidth', that.playWndWidth, that.playWndHeight)
          // that.playText = ''
          // 一进来就隐藏
          // oWebControl.JS_HideWnd() // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
          that.previewVideo()
        })
      // })
    },
    // 视频预览功能
    previewVideo() {
      let that = this
      let cameraIndexCode = that.cameraIndexCode // 08a380e64b2844558901a823ea425bf0,
      // let cameraIndexCode = '37021308001310013273'
      // console.log('接收参数？？', that.cameraIndexCode)
      let streamMode = 0 // 主子码流标识：0-主码流，1-子码流
      let transMode = 0 // 传输协议：0-UDP，1-TCP
      let gpuMode = 0 // 是否启用GPU硬解，0-不启用，1-启用
      let wndId = -1 // 播放窗口序号（在2x2以上布局下可指定播放窗口）
      oWebControl.JS_RequestInterface({
        funcName: 'startPreview',
        argument: JSON.stringify({
          cameraIndexCode: cameraIndexCode.trim(), // 监控点编号
          streamMode: streamMode, // 主子码流标识
          transMode: transMode, // 传输协议
          gpuMode: gpuMode, // 是否开启GPU硬解
          wndId: wndId, // 可指定播放窗口
        }),
      })
    },
    // 关闭视频预览
    handleClose() {
      oWebControl.JS_RequestInterface({
        funcName: 'stopAllPreview',
      })
      this.$emit('close')
    },
    //获取公钥
    // getPubKey(callback) {
    //   oWebControl
    //     .JS_RequestInterface({
    //       funcName: 'getRSAPubKey',
    //       argument: JSON.stringify({
    //         keyLength: 1024,
    //       }),
    //     })
    //     .then(function (oData) {
    //       console.log('odate公钥', oData)
    //       if (oData.responseMsg.data) {
    //         pubKey = oData.responseMsg.data
    //         callback()
    //       }
    //     })
    // },
    //RSA加密
    // setEncrypt(value) {
    //   var encrypt = new JSEncrypt()
    //   encrypt.setPublicKey(pubKey)
    //   return encrypt.encrypt(value)
    // },
  },
}
</script>
<style scoped lang="less">
.videoPopup {
  width: 1100px; // 650
  height: 830px; // 450
  background: url('../../assets/image/cesium/video-bg.png') no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 55%;
  left: 50%;
  z-index: 10000;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  padding: 50px 50px 36px 50px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  .close {
    width: 30px;
    height: 30px;
    background: url('../../assets/image/cesium/close.png') no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 60px;
    right: 40px;
    cursor: pointer;
  }
  .mainTitle {
    font-size: 30px;
    color: #fff;
    text-align: left;
  }
  .videoBox {
    width: 100%;
    height: 420px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 15px;
    position: relative;
    .playWnd {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
